<template>
    <div class="optionPicker" @click="toggleOptionList">
        <span></span> <i class="el-icon-arrow-down"></i>
        <div class="optionList" v-if="optionObj !== null">
            <i class="flag"></i>
            <span v-for="(v, k) in optionObj" :key="k" @click="selectType($event, v, classNameStr)">{{v.key}}</span>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    import $ from "jquery";
    import Vue from "vue";

    export default {
        name: "optionPickerCmp",

        data () {
            return {

                optionObj: this.$props.data,

                materialDataObj: this.$props.materialData,

                classNameStr: this.$props.className,

                attr: this.$props.target,

                callBack: this.$props.callBackName,
            }
        },

        props: ["data", "materialData", "className", "target", "callBackName"],

        created () {

            this.$root.$on("pickDataChanged", this.reloadData);

            this.reloadData({
                option: this.optionObj,
                dataObj: this.materialDataObj,
                className: this.classNameStr,
            });
        },

        methods: {

            toggleOptionList (e) {

                let target = $(e.target);

                if (!target.hasClass("optionPicker")) {
                    target = target.parent();
                }

                const optionView = target.find(".optionList");

                if (optionView.css("display") === "block") {

                    optionView.fadeOut(300);

                    target.find(".el-icon-arrow-down").removeClass("selectedType");

                } else {

                    optionView.fadeIn(300);

                    target.find(".el-icon-arrow-down").addClass("selectedType");
                }
            },


            reloadData (data) {

                if (this.classNameStr !== data.className) return;

                this.optionObj = data.option;

                this.materialDataObj = data.dataObj;

                this.attr = this.$props.target;

                this.callBack = this.$props.callBackName;

                this.$forceUpdate();

                const _this = this;

                this.$nextTick(() => {

                    $(data.className + " .optionList span").removeClass("selected");

                    _this.optionObj.forEach((item, index) => {

                        if (item.selected) {

                            $(data.className + " .optionList span").eq(index).addClass("selected");

                            $(data.className + ">span").text(item.key);

                        }
                    });
                });
            },

            selectType (e, data, type) {

                const selectedView = $(e.target).parent().parent().find("span").eq(0);

                if (selectedView.text() === data.key) return;

                selectedView.text(data.key);

                $(e.target).addClass("selected").siblings().removeClass("selected");


                if (type === ".selectBox.typeOption") {

                    const name = this.materialDataObj.material.name;

                    const newMat = new Halo[data.value]();
                    newMat.name = name;

                    Halo.Config.scene().traverse((data) => {
                        if (data.type === "Mesh" && data.material && data.material.name === name) {
                            data.material = newMat;
                        }
                    });

                    this.materialDataObj.material = newMat;

                    Editor.save('mat', name, newMat);

                    Vue.prototype.baseConfig.material = Editor.getMaterials();

                    this.$root.$emit("outLineDataChanged");

                } else if (type === ".selectBox.mixOption") {

                    this.materialDataObj.material.blending = data.value;

                } else if (this.attr) {

                    this.materialDataObj[this.attr] = data.value;

                    if (this.materialDataObj.image) {
                        Halo.Config.get().textures[this.materialDataObj.name][this.attr] = data.value;
                    }
                }

                if (this.materialDataObj.material && this.materialDataObj.material.hasOwnProperty("needsUpdate")) {
                    this.materialDataObj.material.needsUpdate = true;
                }

                if (this.callBack) {

                    this.$root.$emit(this.callBack, data.value);

                }

                $(e.target).parent().fadeOut(300).parent().find(".el-icon-arrow-down").removeClass("selectedType");

            }
        },
    }
</script>

<style scoped>
    .optionPicker {
        width:110px;
        height:24px;
        background:rgba(47,48,66,1);
        border:1px solid rgba(105, 108, 145, 1);
        border-radius:5px;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        position: relative;
        box-sizing: border-box;
    }

    .optionPicker>span {
        font-size:12px;
        font-weight:100;
        color:rgba(182,184,220,1);
        padding-left: 6px;
        line-height: 24px;
        display: inline-block;
        height: 24px;
        width: 80px;
        overflow: hidden;
        vertical-align: top;
    }

    .optionPicker>i {
        position: absolute;
        right: 9px;
        top: 5px;
        font-size:12px;
        font-weight:100;
        color:rgba(182,184,220,1);
        width: 13px;
        height: 13px;
        vertical-align: middle;
        line-height: 13px;
        transition: .5s all;
    }

    .optionList {
        width: 110px;
        position: absolute;
        top: 38px;
        background:rgba(31,33,49,1);
        border-radius:5px;
        border:1px solid rgba(105, 108, 145, 1);
        display: none;
        z-index: 10000000;
    }

    .optionList span {
        font-size:12px;
        font-weight:100;
        color:rgba(182,184,220,1);
        padding: 6px 0 6px 13px;
        display: block;
        background: rgba(30, 33, 50, 1);
        border-bottom: 1px solid rgba(12,13,18,1);
        z-index: 10;
        box-sizing: border-box;
        overflow: hidden;
    }

    .optionList span:hover {
        background: rgba(65,67,90,1);
    }

    .selected {
        background: rgba(65,67,90,1) !important;
    }

    .optionPicker .flag {
        position: absolute;
        top: -7px;
        right: 15px;
        width: 0;
        height: 0;
        border-color: rgba(65,67,90,1) transparent transparent transparent;
        border-style: solid;
        border-width: 8px 5px 0 5px;
        transform: rotateZ(60deg);
    }

    .selectedType {
        transition: .5s all;
        transform: rotateZ(180deg) !important;
    }
</style>